|
输入框的单侧边框
Flutter TextField属性
const TextField({
Key key,
this.controller, // 控制正在编辑文本
this.focusNode, // 获取键盘焦点
this.decoration = const InputDecoration(), //装饰 包含hintText
TextInputType keyboardType, // 键盘类型
this.textInputAction, // 键盘的操作按钮类型
this.textCapitalization = TextCapitalization.none, // 配置大小写键盘
this.style, // 输入文本样式
this.textAlign = TextAlign.start, // 对齐方式
this.textDirection, // 文本方向
this.autofocus = false, // 是否自动对焦
this.obscureText = false, // 是否隐藏内容，例如密码格式
this.autocorrect = true, // 是否自动校正
this.maxLines = 1, // 最大行数
this.maxLength, // 允许输入的最大长度
this.maxLengthEnforced = true, // 是否允许超过输入最大长度
this.onChanged, // 文本内容变更时回调
this.onEditingComplete, // 提交内容时回调
this.onSubmitted, // 用户提示完成时回调
this.inputFormatters, // 验证及格式
this.enabled, // 是否不可点击
this.cursorWidth = 2.0, // 光标宽度
this.cursorRadius, // 光标圆角弧度
this.cursorColor, // 光标颜色
this.keyboardAppearance, // 键盘亮度
this.scrollPadding = const EdgeInsets.all(20.0), // 滚动到视图中时，填充边距
this.enableInteractiveSelection, // 长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】
this.onTap, // 点击时回调
})
其中decoration是用来描述输入框的
const InputDecoration({
this.icon, //输入框种的icon提示
this.labelText,//和Icon类
this.labelStyle,
this.helperText,//提示文本
this.helperStyle,
this.helperMaxLines,
this.hintText,//暗示文本
this.hintStyle,
this.hintMaxLines,
this.errorText,//错误提示
this.errorStyle,
this.errorMaxLines
//还要很多属性看几个重点的
...
this.focusedBorder,//获取到焦点时候的边框。比如：正在输入的时候的边框
this.focusedErrorBorder,//焦点失败的时候边框
this.disabledBorder,//禁用时候的边框
this.enabledBorder,//可用的时候边框
this.border,//可用的时候边框
}
如果你添加了controller，注意border只有在enableBorder 以及其他几个没有赋值的时候才有用，并且修改颜色和宽度都不会生效。
在decoration修饰单侧边框无法做到。
我们可以在父布局指定，同时需要在decoration种指定透明色，不然会被覆盖。
Container(
height: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 0.5,
color: Colors.red),
top: BorderSide(
width: 0.5,
color: Colors.red))),
width: double.infinity,
child: TextField(
textAlign: TextAlign.center,
controller: inputController,
maxLines: 1,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.circular(0)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.circular(0)),
)
),
),
))
|